<template>
  <div style="background-color: white;padding: 20px">
    <Rolealert :render="render"></Rolealert>
    <Roletable :handleEdit="handleEdit" :offeditinput="offeditinput" :enteredit="enteredit" :roleList="roleList"
      :render="render"></Roletable>
    <el-pagination layout="prev, pager, next" :total="Number(total)" v-model:current-page="page"
      v-model:page-size="pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script setup lang="ts">
import { getUserInfo, editrole } from "../api/login";
import { ref, onMounted } from "vue";
import Roletable from "../components/roletable.vue";
import Rolealert from "../components/rolealert.vue";
import { useStore } from '@/stores/counter'
import { ElMessage } from 'element-plus'
const store = useStore()
const roleList: any = ref([]);
const page = ref(1);
const pagesize = ref(5);
const total = ref('')
const render = () => {
  getUserInfo(page.value, pagesize.value).then((res) => {
    total.value = res.data.data.total
    res.data.data.rows.forEach((item: any) => {
      item.flag = false
    })
    roleList.value = res.data.data.rows;
  });
};
onMounted(() => {
  render();
});
const handleSizeChange = (val: number) => {
  render()
}
const handleCurrentChange = (val: number) => {
  render()
}
const handleEdit = (index: number, row: any) => {
  roleList.value[index].flag = true
  store.$state.rolelists = {
    id: row.id,
    name: row.name,
    state: row.state,
    description: row.description
  }
};
const offeditinput = (index: number, row: any) => {
  roleList.value[index].flag = false
}
const enteredit = (index: number, row: any) => {
  console.log(store.$state.rolelists);
  editrole(store.$state.rolelists.id, store.$state.rolelists).then((res) => {
    console.log(res.data);
    if (res.data.code == 10000) {
      ElMessage({
        message: res.data.message,
        type: 'success',
      })
      roleList.value[index].flag = false
      render()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
</script>

<style scoped>
.el-pagination {
  margin-left: 550px;
}
</style>
